<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Biographical Notes</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<style>
/*div{*/
/*    border:1px solid red;*/
/*}*/
.info>p {
	margin: 0;
	/*border: 1px solid black;*/
	width: 250px;
	display: inline-block;
	padding: 10px;
	text-indent: 20px;
	/*letter-spacing: 2px;*/
}

.container {
	border: 1px solid skyblue;
	width: 800px;
	height: 1500px;
	background-color: #eeeeff;
	margin: auto;
}

.baseinfo {
	height: 16%;
}

.info {
	width: 600px;
	float: left;
}

.photo {
	/*border: 1px solid blue;*/
	width: 150px;
	height: 204px;
	float: left;
	padding: 10px;
	margin: 10px 14px auto 6px;
}

.btn {
	text-align: center;
	height: 80px;
	width: 120px;
	line-height: 80px;
	border-radius: 5px;
	cursor: pointer;
	background-color: #FFFF00;
	color: block;
	margin: 0 auto;
	position: absolute;
	right: 50%;
	top: 80%;
}
</style>
</head>
<body>
	<div class="container">
		<div class="baseinfo" id="abc">
			<div>
				<div class="info">
					<p style="font-size: 30px; color: lightseagreen; font-weight: bold">{{venue.nickname}}</p>
					<br>
					<p>地址：{{venue.address}}</p>
					<p>手机：{{venue.phoneNumber}}</p>
					<br>
					<p>qq：{{venue.qq}}</p>
					<p>微信：{{venue.wx}}</p>
					<br>
				</div>
				<div class="photo">
					<img :src="venue.avatar" style="width: 100%; height: 100%;">
				</div>
			</div>
			<button class="btn" @click="onclick(venue.vid)">申请签约该场馆</button>
		</div>
	</div>
	<script type="text/javascript">
    var vid = window.location.href.split("=")[1];//截取字符串
    console.log(vid);
    new Vue({
		el:"#abc",
	    data() {
	        return {
	        	venue:null,
	        };
	    },
	    mounted() {
			axios.get(
					"/venue/find/"+vid
				).then(res=>{
					 if(res.data.code==500){
	  						location.href="/error/500.html";
	  					}
					console.log(res.data);
						this.venue=res.data.data;
				});
	    },
	    methods: {
	    	onclick:function(vid){
	    				var params =new URLSearchParams();
	    				params.append("id",vid);
	    				axios.post(
						"/coach/coachsign",
	    						params
					).then(res=>{
						 if(res.data.code==500){
		  						location.href="/error/500.html";
		  					}
						if(res.data.code==200){
							alert("申请成功！")
						}else{
							alert(res.data.msg)
						}
					});
	    	}
	        }
    });
    </script>
</body>

</html>
